<template>
	<view class="page-body">
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid.name}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
				<view v-for="(tab,index1) in listItems" :key="index1" :class="['tabItem',index1==tabbarIndex?'fadein':'fadeout']">
						<block v-for="(orderData, idx) in tab.listData" :key="idx" >
							<!-- <order-item :orderData="item" :index="idx" :tabbarIndex="tabbarIndex" @cancelOrder="doCancelOrder" @payOrder="doPayOrder" :updata="isupdata"></order-item> -->
							<view class="list">
								<view class="row" >
									<view class="type">{{orderData.status_description}}</view>
									<view class="order-info" @click="goDetail(orderData)">
										<view class="left">
											<image :src="orderData.goods_thumb"></image>
										</view>
										<view class="right">
											<view class="name">
												{{orderData.goods_name}}
											</view>
											<view class="spec">{{orderData.attr_value_str}}</view>
											<view class="price-number">
												￥<view class="price">{{orderData.goods_amount}}</view>
												x<view class="number">{{orderData.goods_num}}</view>
											</view>
										</view>
									</view>
									<view class="detail">
										共{{orderData.goods_num}}件商品，合计￥<view class="price">{{orderData.payable_amount}} </view> (含运费 ￥{{orderData.shipping_fee}})
									</view>
									<view class="btns">
										<block v-if="orderData.status=='0'">
											<view class="default" @tap="cancelOrder(orderData.id)">取消订单</view>
											<view class="pay" @tap="toPayment(orderData.id)">付款</view>
										</block>
										<!-- <block v-if="orderData.status=='1'"> -->
										<block v-if="orderData.status=='1'&&orderData.pay_status==2">
											<view class="pay" @tap="Applyreturns(orderData.id)">我要退款</view>
										</block>
										<block v-if="orderData.status=='2'">
											<view class="default" v-if="orderData.kuaidi_num" @tap="showLogistics(orderData)">查看物流</view>
											<view class="pay" @tap="Comfirmreceipt(orderData.id)">确认收货</view>
											<view class="pay" @tap="Applyreturns(orderData.id)">我要退款</view>
										</block>
										<block v-if="orderData.status=='3'">
											<view class="default" @tap="evaluation(orderData)">评价</view>
											<!-- <view class="default">再次购买</view> -->
										</block>
										<!-- <block v-if="orderData.status=='6'">
											<view class="default">再次购买</view>
										</block> -->
										<block v-if="orderData.status=='4'">
											<view class="default" @tap="checkSchedule(orderData.rid)" >查看进度</view>
											<!-- <view class="default" @tap="fillLogistics(orderData.rid)" >填写物流</view>
											<view class="pay" @tap="cancelRefunds(orderData.rid)" v-if="orderData.shipping_status == 3">取消退货</view> -->
										</block>
									</view>
								</view>
							</view>
						</block>
						<load-more :listnull="tab.listnull" :loadtype="tab.loadtype" :text2="tab.text2" ref="loadmore">
							<block slot="null">
								<defalut type="16"></defalut>
							</block>
						</load-more>
				</view>
		</view>
	</view>
</template>
<script>
	var that;
	import orderItem from '@/components/order-item.vue';
	import defalut from '@/components/defalut.vue';
	import {pageLoad} from '@/utils/request.js';
	import loadMore from '@/components/load-more.vue';
	export default {
		data() {
			return {
				headerPosition: "fixed",
				headerTop: "0px",
				orderType: [{id:0,name:'全部'}, {id:1,name:'待付款'},{id:2,name:'待发货'},{id:3,name:'待收货'},{id:4,name:'待评价'},{id:5,name:'退换货'}],
				tabbarIndex: 0,
				listItems:[{
					listData : [],loadtype : 0 ,//加载更多 0加载前，1加载中，2没有更多了
					refreshing : 0,listnull:false,listLen:4,page:1,	text2:"",
				}],
				// status:0,//0:待付款,1:待发货，2:待收货，3:待评价，4:退款货，5:订单取消，6:订单完成;7:订单无效
				orderstatus:"",
			};
		},
		onLoad(option) {
			that = this;
			//option为object类型，会序列化上个页面传递的参数
			let tbIndex = parseInt(option.tbIndex) + 1;
			this.tabbarIndex = tbIndex;
			
			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onShow(){
			this.tabInit()
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},	
		methods: {
			tabInit(){
				let orderType = this.orderType;
				orderType.forEach(item=>{
					item.listData = [];
					item.loadtype = 0;  //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.listnull=false;
					item.listLen=6;
					item.text2=""
					item.page=1;
					item.loaded=false
				})	
				that.listItems=orderType;
				that.getOrderList(true)
			},
			getOrderList(isReload){
				let tabindex=this.tabbarIndex;
				let list=this.listItems[tabindex];
				let tabid=list.id;
				if(isReload){
					list.listData=[];
					list.loadtype=0;
					list.listnull=false;
					list.page=1;
					// that.$set(that.listItems,tabindex,list);
				}
				if (list.loadtype==2||list.loadtype==1) { return; }
				this.$https.POST({
					url:"/order/orderLists",
					data:{
						status: tabindex,page:list.page
					},
					success(res){
						list.loadtype=1;
						let nowlistData=list.listData;
						res.data.forEach((item,index)=>{
							that.initData(item,index)
						})
						let listData=nowlistData.concat(res.data)
						list.listData=listData;
						++list.page;
						if(list.listData.length==0&&res.data.length==0){
							list.listnull=true
						}
						if(list.listData.length>0&&res.data.length<10){
							if(list.listData.length<=list.listLen){
								list.text2=" ";
							}
						   list.loadtype=2;
						   list.loadtype=2;
						   that.$set(that.listItems,tabindex,list)
						   return;
						}
						that.$set(that.listItems,tabindex,list)
						list.loadtype=0;
					}
				})
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.getOrderList(true)
			},
			initData(orderData,index){
				// let orderData = this.orderData;
				// this.orderstatus = orderData.order_status
				/* order_status
					0提交,1已支付,2已取消,3无效,4已收货订单完成,5退货中,6退货完成
				   shipping_status商品状态
				    0未发货,1已发货,2已收货,3退货中,4退货完成
				   pay_status
				    0未付款;1付款中;2已付款 
			    */
			   if(this.tabbarIndex==2&&index%2){
				   orderData.pay_status = 1;
			   }
				
			    if(orderData.order_status==0){
					if(orderData.pay_status==0){
						orderData.status_description = "等待付款";
						orderData.status = 0
					}else{
						orderData.status_description = "订单无效"
						orderData.status = 7
					}
					
				}else if(orderData.order_status==1){ //1已支付
					if(orderData.shipping_status==0&&orderData.pay_status==2){ //待发货
						orderData.status_description = "等待商家发货";
						orderData.status = 1;
					}
					if(orderData.shipping_status==0&&orderData.pay_status==1){
						orderData.status_description = "待确认支付";
						orderData.status = 1;
					}
					if(orderData.shipping_status==1&&orderData.pay_status==2){ //待收货
						orderData.status_description = "商家已发货"
						orderData.status = 2
					}
					
				}else if(orderData.order_status==2){ 
					orderData.status_description = "订单已取消"
					orderData.status = 5;
				}else if(orderData.order_status==3){ 
					orderData.status_description = "订单无效";
					orderData.status = 7;
				}else if(orderData.order_status==4){
					if(orderData.is_comment!=0){
						orderData.status_description = "订单已完成"
						orderData.status = 6
					}
					if(orderData.is_comment==0&&orderData.shipping_status==2){
						orderData.status = 3
						orderData.status_description = "等待用户评价"
					}
					
				}else if(orderData.order_status==5){ //退货中
					orderData.status = 4;
					if(orderData.shipping_status==3){
						orderData.status_description = "商品退货处理中"
					}
				}else if(orderData.order_status==6){
					orderData.status = 4;
					if(orderData.shipping_status==4){
						orderData.status_description = "退货完成"
					}
				}
			},
			/* 取消订单 */
			cancelOrder(oid) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							that.$https.POST({
								url:'/order/closeOrder',
								data:{
								  oid: oid,
								},
								success(res){
									that.$showToast("订单取消成功");
									that.doCancelOrder(oid)
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			/* 付款 */
			toPayment(oid) {
				uni.navigateTo({
					url:"/pages/pay/payment/payment?oid="+oid
				})
			},
			/* 取消订单 从列表移除 */
			doCancelOrder(e) {
				let oid = e;
				let list = this.listItems[this.tabbarIndex];
				let oindex = list.listData.findIndex(item=>{
					return item.id == oid
				})
				if(this.tabbarIndex == 1){ //待付款 > 删除当前项
					list.listData.splice(oindex,1);
					if(list.listData.length==0){
						list.listnull=true
					}
				}else if(this.tabbarIndex == 0){ //全部 > 改变状态
					list.listData[oindex].order_status = 2;
					this.initData(list.listData[oindex])
				}
				this.$set(this.listItems,this.tabbarIndex,list)
			},
			doPayOrder(e){
				let oid = e;
				let list = this.listItems[this.tabbarIndex];
				let oindex = list.listData.findIndex(item=>{
					return item.id == oid
				})
				if(this.tabbarIndex == 1){ //待付款 > 删除当前项
					list.listData.splice(oindex,1);
					if(list.listData.length==0){
						list.listnull=true
					}
				}else if(this.tabbarIndex == 0){ //全部 > 改变状态
					list.listData[oindex].order_status = 1;
					list.listData[oindex].shipping_status = 0;
					this.initData(list.listData[oindex])
				}
				this.$set(this.listItems,this.tabbarIndex,list)
			},
			/* 查看物流 */
			showLogistics(row) {
				let goodsmsg = encodeURIComponent(JSON.stringify(row));
				uni.navigateTo({
					url: "/pages/user/order_list/order/logistics?goodsmsg="+goodsmsg
				})
			},
			/* 确认收货 */
			Comfirmreceipt(oid) {
				uni.showModal({
					title: '确认收货',
					content: '是否确认收货？',
					success: (res) => {
						if (res.confirm) {
							that.$https.POST({
								url:'/order/confirmReceivingGoods',
								data:{
									oid: oid
								},
								success(res){
									let list = that.listItems[that.tabbarIndex];
									let oindex = list.listData.findIndex(item=>{
										return item.id == oid
									})
									if(that.tabbarIndex == 3){ //待收货 > 删除当前项
										list.listData.splice(oindex,1);
										if(list.listData.length==0){
											list.listnull=true
										}
									}else if(that.tabbarIndex == 0){ //全部 > 改变状态
										list.listData[oindex].order_status = 1;
										list.listData[oindex].shipping_status = 2;
										that.initData(list.listData[oindex])
									}
									that.$set(that.listItems,that.tabbarIndex,list)
									that.$showToast("确认收货成功");
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
				
			},
			/* 申请退款 */
			Applyreturns(oid) {
				uni.navigateTo({
					url: './order/apply_returns?oid=' + oid
				})
			},
			/* 评价 */
			evaluation(row) {
				let oid = row.id;
				let goodsmsg = encodeURIComponent(JSON.stringify(row));
				uni.navigateTo({
					url: "./order/evaluation?goodsmsg=" + goodsmsg
				})
			},
			/* 退款详情 */
			checkSchedule(rid) {
				// let goodsmsg = encodeURIComponent(JSON.stringify(row));
				uni.navigateTo({
					url: "./order/return_schedule?rid=" +rid 
				})
			},
			/* 填写物流 */
			fillLogistics(rid) {
				uni.navigateTo({
					url: "./order/fill_logistics?rid="+rid
				})
			},
			/* 订单详情 */
			goDetail(row) {
				let oid = row.id;
				
				if(this.tabbarIndex == 5){
					let rid = row.rid;
					uni.navigateTo({
						url: "./order/order_detail?oid="+oid+'&rid='+rid
					})
				}else{
					uni.navigateTo({
						url: "./order/order_detail?oid="+oid
					})
				}
			},
			/* 取消退货 */
			cancelRefunds(oid){
				
			},
			errimg(e){
				let index = e.target.dataset.errindex
				let errimg = "/static/img/noorder.png";
				this.listData[index].goods_thumb = errimg
			},
			getProductListsAsync(){
				let tabindex=this.tabbarIndex;
				let list=this.listItems[tabindex];
				let pages=list.page;
				var Data=[];
				function productsList(ipage){
					return that.$https.POST({
						url:'/order/orderLists',
						data:{
							status: tabindex,page:ipage
						},
						success(res){
							res.data.forEach((item,index)=>{
								that.initData(item)
							})
						}
					})
				}
				async function productsLists() {
					for(let i=1;i<pages;i++){
						let data =await productsList(i)
						Data=Data.concat(data.data)
					}
					list.listData=Data;
					that.$set(that.listItems,tabindex,list)
				}
				productsLists()
			},
		},
		onReachBottom() {
			this.getOrderList(false)
		},
		onUnload() {
			// that = null;
		},
		components:{
			orderItem,
			loadMore,
			defalut
		},
		watch:{
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
			    return false;  
			}  
			uni.switchTab({
				url:"/pages/tabBar/user/user"
			})
			return true;
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					color: $maincolor;
					border-bottom: solid 4upx $maincolor;
				}
			}

		}
	}
	.tabItem{position: absolute;width: 100%; transition: opacity .3s linear;overflow: hidden;}
	.tabItem.fadein{opacity: 1;z-index: 3;height: auto;}
	.tabItem.fadeout{opacity: 0;z-index: 0;height: 0;}
	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;
		position:relative;
	.onorder {
		width: 100%;
		height: 50vw;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;

		image {
			width: 20vw;
			height: 20vw;
			border-radius: 100%;
		}

		.text {
			width: 100%;
			height: 60upx;
			font-size: 28upx;
			color: #444;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}	
	}
	.list {
		width: 94%;
		margin: 0 auto;
		.row {
			width: calc(100% - 40upx);
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
	
			.type {
				font-size: 26upx;
				color: $color1;
				height: 60upx;
				display: flex;
				align-items: center;
			}
	
			.order-info {
				width: 100%;
				display: flex;
	
				.left {
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;
	
					image {
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}
	
				.right {
					width: 100%;
					margin-left: 10upx;
					position: relative;
					line-height: 40upx;
					.name {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						
					}
					.spec {
						color: #a7a7a7;
						font-size: 22upx;
						padding-top: 6upx;
					}
					.price-number {
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;
						.price {
							font-size: 24upx;
							margin-right: 5upx;
						}
	
					}
				}
			}
	
			.detail {
				display: flex;
				justify-content: flex-end;
				align-items:center;
				height: 60upx;
				font-size: 26upx;
				.price {
					font-size: 30upx;
					padding-right:8upx;
				}
	
			}
	
			.btns {
				// height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view {
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
					margin-top: 16upx;
					margin-bottom: 16upx;
				}
	
				.default {
					border: solid 1upx #ccc;
					color: #666;
				}
	
				.pay {
					border: solid 1upx $color1;
					color: $color1;
				}
			}
		}
	}
</style>
